<template>
  <!-- 钻石提示 -->
  <view class="balance-card">
    <view class="balance-label">当前钻石</view>
    <view class="balance-amount">¥{{ userInfo.zs || 0.00 }}</view>
  </view>
</template>
<script setup>
const userInfo=ref({})
const getUserInfo=async()=>{
  const res = await qly.api.user.getuser()
  if(res.code===1){
    userInfo.value=res.data
  }
}

onMounted(()=>{
  getUserInfo()
})
defineExpose({
  getUserInfo
})
</script>
<style scoped lang="scss">
/* 钻石卡片 */
.balance-card {
  background: #3c9cff;
  color: #fff;
  padding: 24px 16px;
  border-radius: 16px;
  margin: 16px;
  box-shadow: 0 8px 24px rgba(30, 136, 229, 0.2);
}

.balance-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.balance-amount {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
}

.recharge-tip {
  font-size: 12px;
  opacity: 0.8;
}
</style>